<template>
	<!-- 导航切换 -->
	<scroll-view class="contentNav" scroll-x enable-flex>
		<view @click="activeEdit(item.familyId,index)" v-for="(item,index) in navList" :key="index"
			class="contentNavItem">
			<view class="contentNavItemBox">
				<image :src="item.image" class="item-img"></image>
				<text :class="[active === index ? 'activeText' : '']">
					{{item.familyName}}
				</text>
				<view :class="[active === index ? 'activeBottom' : '']" :style="{
					background:viewBottomBackground,width:widths
				}"></view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			navList: {
				type: Array,
				default: []
			},
			active: {
				type: Number,
				default: 0
			},
			viewBottomBackground: {
				type: String,
				default: "#3FD3D1"
			},
			widths:{
				type:String,
				default:"60%"
			}
		},
		name: "nav-list",
		methods: {
			activeEdit(id, indexs) {
				this.$emit("clickIndex", id, indexs)
			}
		}
	}
</script>

<style lang="scss">
	.item-img {
		width: 25rpx;
		height: 15rpx;
		position: absolute;
		top: 12rpx;
		right: 60upx;
	}

	.contentNav {
		height: 56upx;
		margin-top:20upx;
		display: flex;
		
		.contentNavItem {
			flex: 1;
			margin-right: 10upx;

			.contentNavItemBox {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0upx 10upx;
				position: relative;
				view {

					height: 6upx;
					margin-top: 10upx;
					border-radius: 6upx;
					opacity: 0;
					transition: 0.1s;
				}

				text {
					color: #666666;
					writing-mode: horizontal-tb;
					white-space: nowrap;
					display: block;
					font-size: 28upx;
				}

				.activeText {
					color: #3FD3D1;
				}

				.activeBottom {
					opacity: 1 !important;
				}
			}
		}
	}
</style>
